<template>
  <div class="knowMain-container">
    <!-- 搜索区域 -->
    <div class="knowMain-search">
      <div>知识标题:</div>
      <el-input
        v-model="queryInfo.knowTitle"
        size="small"
        class="margin-left-m"
        style="width: 150px"
        placeholder="请输入知识标题"
        clearable
      />
      <div class="margin-left-m">知识类别:</div>
      <el-cascader
        v-model="queryInfo.knowCateId"
        :options="knowCateOptions"
        class="margin-left-m"
        style="width: 200px"
        size="small"
        placeholder="请选择知识类别"
        :props="{ checkStrictly: true }"
        clearable
      />
      <div class="margin-left-m">阅读次数:</div>
      <el-input
        v-model="queryInfo.readCount"
        class="margin-left-m"
        style="width: 100px"
        size="small"
        placeholder=""
        clearable
      />
      <div class="margin-left-m">点赞次数:</div>
      <el-input
        v-model="queryInfo.praiseCount"
        size="small"
        class="margin-left-m"
        style="width: 100px"
        placeholder=""
        clearable
      />
      <div class="margin-left-m">评价次数:</div>
      <el-input
        v-model="queryInfo.commentCount"
        size="small"
        class="margin-left-m"
        style="width: 100px"
        placeholder=""
        clearable
      />
      <el-button
        size="small"
        type="primary"
        class="margin-left-m"
        @click="getKnowList()"
      >检索</el-button>
    </div>

    <!-- 知识发布审核通过数据 -->
    <el-table border :data="knowList" style="width: 100%">
      <el-table-column prop="knowTitle" align="center" label="知识标题" min-width="150" />
      <el-table-column prop="knowCateName" align="center" label="知识类别" />
      <el-table-column prop="staffCode" align="center" label="发布人" />
      <el-table-column prop="readCount" align="center" label="阅读次数" width="100" />
      <el-table-column prop="praiseCount" align="center" label="点赞次数" width="100" />
      <el-table-column prop="commentCount" align="center" label="评价次数" width="100" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="primary"
            @click="handleDetail(scope.row)"
          >阅读</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <div style="padding-top: 10px">
      <el-pagination
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="详情" :visible.sync="dialogVisible" width="80%">
      <div class="detail-box">
        <div class="title">{{ item.knowTitle }}</div>
        <div class="subtitle">
          <div>发布人 - {{ item.staffCode }}</div>
          <div style="margin-left: 20px">
            知识类别 - {{ item.knowCateName }}
          </div>
        </div>
        <div class="label-content-lbl-box">
          <div class="lbl-content" v-html="item.lblContent" />
          <div class="detail-label-box">
            <div
              v-for="(label, labelIndex) in item.detailList"
              :key="labelIndex"
              :style="{ border: '1px solid' + label.labelColor }"
              class="detail-label-item-box"
              @click="clickLabel(label)"
            >
              <div class="label-top-box">
                <div
                  class="label-color-box"
                  :style="{ background: label.labelColor }"
                />
                <div>
                  {{ label.labelName }}
                </div>
              </div>
              <div class="detail-label-content" :title="label.lblContent">
                {{ label.detaillblContent }}
              </div>
            </div>
          </div>
        </div>
        <div class="detail-file">
          <div style="margin-right: 10px">附件:</div>
          <div v-if="item.list.length > 0">
            <div
              v-for="(file, fileIndex) in item.list"
              :key="fileIndex"
              class="download-file"
              @click="downloadFile(file)"
            >
              <div>{{ file.fileName }}</div>
            </div>
          </div>
          <div v-else>暂无附件</div>
        </div>
        <div class="comments">
          <div class="comment-title">
            <div>评论 ( 共 {{ comments.commentNum }} 条 )</div>
            <div style="display: flex; align-items: center">
              <div class="thumb">
                <svg-icon
                  v-if="!praiseItem.praise"
                  icon-class="thumb"
                  class="thumb-unactive"
                  @click="praise()"
                />
                <svg-icon v-else icon-class="thumb-active" />
              </div>
              <div :style="{ color: praiseItem.praise ? '#E47470' : '' }">
                ( {{ praiseItem.praiseCount }} 点赞 )
              </div>
            </div>
          </div>
          <div v-if="comments.commentNum !== 0" class="com-box">
            <div
              v-for="(com, comIndex) in comments.comments"
              :key="comIndex"
              class="comment-item-box"
            >
              <div class="comment-item">
                <div class="comment-item-user">{{ com.staffCode }}</div>
                <div class="comment-time">{{ com.createtime }}</div>
              </div>
              <div class="comment-content">{{ com.content }}</div>
            </div>
          </div>
          <div v-else>
            <el-empty :image-size="80" description="点击下方发表您的评论" />
          </div>
          <!-- <div class="publish-comment" > -->
          <div v-if="comments.flag" class="publish-left">
            <el-input
              v-model="comment"
              placeholder="请输入你的看法"
            /><el-button
              type="primary"
              style="margin-left: 10px"
              @click="updateComment()"
            >发表</el-button>
          </div>
          <!-- </div> -->
        </div>
      </div>
      <div slot="footer">
        <el-button @click="closeDetail()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getAllApi, getByKnowIdApi, getSingleApi, updateApi, getKnowFileApi } from '@/api/issueApi'
import { getByKnowId, getAllKnowList, updateKnowAPI, getFilesByKnowId, getCategoryAllLevels, getMainDetails, getKnowPraise, getComments, praise, updateComment, updateReadState, insertKnowShare } from '@/api/knowMan'
import axios from 'axios'

export default {
  data() {
    return {
      knowList: [],
      // 查询条件
      queryInfo: {
        pageNum: 1, // 页码
        pageSize: 10, // 每页显示多少条数据
        knowState: 3,
        knowCateId: ''
      },
      total: 0,

      // 调用接口数据
      knowCateForm: [],
      fileList: [],

      // todo 操作-详情
      showDetailDialogVisible: false,
      detailData: {},

      dialogVisible: false,
      item: {
        list: []
      },
      comment: '',
      isThumb: false,
      staffCode: '',
      praiseItem: {},
      comments: {
        commentNum: 0
      },
      knowCateOptions: []
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.staffCode = this.userInfo.username ? this.userInfo.username : this.userInfo.staffCode
    this.getKnowList()
    this.getKnowCategory()
  },
  methods: {
    // 获取知识类别
    getKnowCategory() {
      getCategoryAllLevels().then((res) => {
        if (res.code === 200) {
          this.knowCateOptions = res.list
        }
      })
    },
    // 获取审核通过的知识列表
    getKnowList() {
      const param = {
        pageNum: this.queryInfo.pageNum, // 页码
        pageSize: this.queryInfo.pageSize, // 每页显示多少条数据
        knowState: 3,
        myStaffCode: this.staffCode,
        knowTitle: this.queryInfo.knowTitle,
        knowCateId: this.queryInfo.knowCateId[this.queryInfo.knowCateId.length - 1],
        readCount: this.queryInfo.readCount,
        praiseCount: this.queryInfo.praiseCount,
        commentCount: this.queryInfo.commentCount
      }
      getAllKnowList(param).then((res) => {
        if (res.code === 200) {
          this.knowList = res.list.records
          this.total = res.list.total
        }
      })
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getKnowList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getKnowList()
    },

    // todo 操作-详情
    downloadFile(row) {
      axios({
        method: 'post',
        url: '/know-api/knowArchFiles/Download',
        responseType: 'blob',
        params: {
          url: row.fileURL
        }
      }).then((res) => {
        if (res.status === 200) {
          const fileName = row.fileName
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(res.data)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        } else {
          this.$notify.error({
            title: '',
            message: '下载异常'
          })
        }
      })
    },

    async showDetailDialog(cateInfo) {
      // 知识详情
      getByKnowId({ knowId: cateInfo.knowId }).then((res) => {
        if (res.code === 200) {
          this.detailData = res.item
          // getKnowLabel({ knowId: cateInfo.knowId }).then((res) => {
          //   // eslint-disable-next-line no-prototype-builtins
          //   if (res.code === 200 & res.item.hasOwnProperty('lblContent')) {
          //     this.detailData.knowContent = res.item.lblContent
          //   }
          // })
        }
      })

      // 知识附件
      getFilesByKnowId({ knowId: cateInfo.knowId }).then((res) => {
        if (res.code === 200) {
          this.fileList = res.data
        }
      })

      this.showDetailDialogVisible = true
      // 阅读次数+1
      updateKnowAPI({ knowId: cateInfo.knowId, readCount: cateInfo.readCount + 1 }).then((res) => {
        if (res.code === 200) {
          this.getKnowList()
        }
      })
    },

    // 点击详情
    handleDetail(row) {
      this.row = row
      this.detailSearch = {
        knowId: this.row.knowId,
        myStaffCode: this.staffCode
      }
      this.updateReadState()
      if (!row.ks_in) {
        this.insertKnowShare()
        return
      }
      Promise.all([
        this.getMainDetails(),
        this.getKnowPraise(),
        this.getComments()
      ]).then((res) => {
        this.dialogVisible = true
      })
    },
    // 新增我的阅读知识
    insertKnowShare() {
      insertKnowShare(this.detailSearch).then((res) => {
        Promise.all([
          this.getMainDetails(),
          this.getKnowPraise(),
          this.getComments()
        ]).then((res) => {
          this.dialogVisible = true
        })
      })
    },
    // 进行阅读
    updateReadState() {
      updateReadState(this.detailSearch)
    },
    // 获取详情主体
    getMainDetails() {
      getMainDetails({
        knowId: this.row.knowId
      }).then((res) => {
        this.item = res.item
      })
    },
    // 获取详情的点赞
    getKnowPraise() {
      getKnowPraise(this.detailSearch).then((res) => {
        this.praiseItem = res.item
      })
    },
    // 获取详情评论
    getComments() {
      getComments(this.detailSearch).then((res) => {
        this.comments = res.item
      })
    },
    // 点击关闭阅读
    closeDetail() {
      this.dialogVisible = false
    },
    // 详情-进行点赞
    praise() {
      praise(this.detailSearch).then((res) => {
        this.getKnowPraise()
      })
    },
    // 详情-进行评论
    updateComment() {
      const param = {
        ...this.detailSearch,
        comment: this.comment
      }
      updateComment(param).then((res) => {
        this.comment = ''
        this.getComments()
      })
    }
  }
}
</script>

<style scoped>
.knowMain-container {
  padding: 15px;
}

.knowMain-search {
  display: flex;
  align-items: center;
  flex-flow: nowrap;
  height: 60px;
  color: rgb(96, 98, 102);
  font-size: 15px;
}
.knowMain-search div {
  white-space: nowrap;
}
.margin-left-m {
  margin-left: 10px;
}

/* 打标内容 */
.detail-box {
  font-size: 16px;
  line-height: 30px;
}
.right-content {
  margin-left: 8px;
}
.detail-content-box {
  display: flex;
}
.detail-content-left {
  width: auto;
  white-space: nowrap;
  margin-right: 10px;
}
.detail-content-right {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 7px 10px;
}
.detail-left {
  flex: 3;
}
.detail-label-box {
  flex: 1;
  min-width: 250px;
  padding-right: 10px;
  max-height: 500px;
  overflow-y: auto;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
.detail-box {
  text-align: center;
  font-size: 15px;
}
.detail-box .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
.subtitle {
  display: flex;
  justify-content: center;
}
.lbl-content {
  width: 90%;
  text-align: justify;
  margin: 0 auto;
  line-height: 28px;
  font-size: 16px;
  margin-top: 15px;
  text-indent: 32px;
  margin-bottom: 20px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.detail-file {
  width: 90%;
  text-align: left;
  margin: 0 auto;
  display: flex;
}
.download-file {
  color: #409eff;
  cursor: pointer;
  margin-right: 15px;
}
.comments {
  width: 90%;
  margin: 0 auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  margin-top: 15px;
  text-align: left;
}
.comment-title {
  padding: 10px 0 10px 5px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-item-box {
  padding: 5px 0 10px 5px;
  border-bottom: 1px solid #eee;
  /* margin-bottom: 10px; */
}
.comment-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.comment-item-user {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.comment-time {
  font-size: 13px;
}
.comment-content {
  padding: 0 10px;
}
.publish-comment {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}
.publish-left {
  /* width: 80%; */
  display: flex;
  margin-top: 10px;
}
.thumb {
  font-size: 26px;
  margin-right: 5px;
  color: #666;
}
.thumb-unactive {
  cursor: pointer;
}
.thumb-active {
  color: white;
  background: #f56c6c;
  border-radius: 50px;
  padding: 4px 6px 6px 4px;
}
.com-box {
  max-height: 300px;
  overflow-y: auto;
}

.label-content-lbl-box {
  display: flex;
  width: 90%;
  margin: 0 auto;
}

/* 标签列表 */

.detail-label-box {
  flex: 1;
  min-width: 200px;
  margin-top: 15px;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
  text-align: left;
}
</style>
<style>
/* ::-webkit-scrollbar {
  width: 8px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #888;

} */
</style>
